<template>
  <div class="topHeard">
    <div class="name">人脸考勤大屏</div>
    <div class="time">{{time}}</div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted ,onBeforeUnmount } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const time = ref(new Date().toLocaleString());
onMounted(() => {
  //console.log('3.-组件挂载到页面之后执行-------onMounted')
  t.value = setInterval(()=>{
    time.value = new Date().toLocaleString();
  },1000)
});
const t = ref(null);
onBeforeUnmount(()=>{
    clearInterval(t.value)
})
</script>
<style scoped lang="scss">
.topHeard {
  height: 80px;
  background-image: url("../../assets/images/top@2x.png");
  padding: 0 60px 0 120px;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .name {
    font-size: 60px;
    font-family: "MicrosoftYaHeiUI", "MicrosoftYaHeiUI";
    font-weight: bold;
    color: #5ca9fb;
    line-height: 76px;
    letter-spacing: 20px;
    background: angular-gradient(180deg, #81f6ff 0%, #4ba3ff 100%);
    -webkit-background-clip: text;
  }
  .time {
    height: 62px;
    font-size: 36px;
    font-family: DINPro, DINPro;
    font-weight: bold;
    color: #07a8ff;
    line-height: 62px;
  }
}
</style>
